<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8"/>
  <title>借阅列表</title>
  <link rel="stylesheet" href="/css/layui.css" media="all"/>
  <link rel="stylesheet" href="/css/user.css" media="all" />
  <style type="text/css">
  	.editDeal .layui-form-label {
  		width: 120px;
  	}
  	
  .editDeal .layui-textarea {
  		width: 300px;
  	}
  </style>
</head>
<body>
<div class="borrowDiv">
  <br/><br/>
 用户昵称：
  <div class="layui-inline">
    <input class="layui-input" name="nickname" id="nickname" autocomplete="off"/>
  </div>
 真实姓名：
  <div class="layui-inline">
    <input class="layui-input" name="realname" id="realname" autocomplete="off"/>
  </div>
  <br/><br/>
 图书名称：
  <div class="layui-inline">
    <input class="layui-input" name="bookname" id="bookname" autocomplete="off"/>
  </div>
  图书类别：
  <div class="layui-inline">
   	<form class="layui-form" action="">
    <select name="typeid" id="typeid" autocomplete="off">
    		  <option value="">--请选择--</option>
              <option value="1">文学</option>
              <option value="2">外语</option>
              <option value="3">经济</option>
              <option value="4">管理</option>
              <option value="5">计算机</option>
              <option value="6">科学</option>
    </select>
    </form>
  </div> 
  <br/><br/>
  借阅状态：
  <div class="layui-inline">
   	<form class="layui-form" action="">
    <select name="isDeal" id="isDeal" autocomplete="off">
    		  <option value="">--请选择--</option>
    		  <option value="0">未取</option>
              <option value="1">已取</option>
              <option value="2">已还</option>
    </select>
    </form>
  </div> 
  是否超期：
  <div class="layui-inline">
   	<form class="layui-form" action="">
    <select name="isOvertime" id="isOvertime" autocomplete="off">
    		  <option value="">--请选择--</option>
    		  <option value="0">未超期</option>
              <option value="1">已超期</option>
    </select>
    </form>
  </div>
  
  
  
  <button class="layui-btn" data-type="reload">搜索</button>
</div>

<br/>
<div class="layui-btn-group otherOperation">
  <button class="layui-btn" data-type="addBorrow">添加借阅记录</button>
</div>


<table class="layui-hide" id="borrowTable" lay-filter="tableFilter"></table>
 
<script src="/layui.js"></script>
<script>
/*<![CDATA[*/
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#borrowTable'
    ,height: 'full'                   
    ,url: '/admin/getBorrow' //数据接口
    ,request: {
    		  pageName: 'begin' //页码的参数名称，默认：page
    		  ,limitName: 'length' //每页数据量的参数名，默认：limit
    		  }
    ,page: true //开启分页
    ,even: true
    ,cols: [[ //表头
      {checkbox: true, fixed: true}
      ,{field: 'borrowId', title: '借阅编号', align:'center', width:180,fixed: 'left'}
      ,{field: 'isDeal', title: '借阅状态', align:'center', width:100,templet: '#checkboxTpl', unresize: true,fixed: 'left'}
      ,{field: 'nickName', title: '用户昵称', align:'center', width:130}
      ,{field: 'realName', title: '真实姓名', align:'center', width:100}
      ,{field: 'bookName', title: '图书名称', align:'center', width:150}
      ,{field: 'bookNumber', title: '图书编号', align:'center', width:180}
      ,{field: 'bookType', title: '图书类别', align:'center', width:95}
      ,{field: 'amount', title: '借阅数量', align:'center', width:95}
      ,{field: 'borrowTime', title: '借阅时间', align:'center', width:180}
      ,{field: 'returnTime', title: '应归还时间', align:'center', width:180}
      ,{field: 'actualReturnTime', title: '实际归还时间', align:'center', width:180}
      ,{field: 'isOvertime', title: '归还是否超期', align:'center', width:120}
      ,{field: 'bookSituation', title: '归还图书情况', align:'center', width:200}
      ,{field: 'result', title: '归还处理结果', align:'center', width:200}
      ,{fixed: 'right', title: '操作',width:150, align:'center', toolbar: '#handler'} //这里的toolbar值是模板元素的选择器
    ]]
    ,id: 'borrowReload'
   	,done: function(res, page, count){
            //如果是异步请求数据方式，res即为你接口返回的信息。  
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度  
            $("[data-field='isOvertime']").children().each(function(){
        	   if($(this).text()=='0'){
                   $(this).text("未超期");
               }
        	   if($(this).text()=='1'){
                   $(this).text("已超期");
               }
           })  
            
   } 
    
    
  });//render结束
    
    //条件查询
	var $ = layui.$, active = {
		reload : function() {
			var nickname = $('#nickname').val().trim();
			var realname = $('#realname').val().trim();
			var bookname = $('#bookname').val().trim();
			var typeid = $('#typeid').val().trim();
			var isDeal = $('#isDeal').val().trim();
			var isOvertime = $('#isOvertime').val().trim();
			var jsonString = "";
			var acceptMap = "";
			
			var i = 0;
			jsonString = "{";
			if(isDeal!=null&&isDeal!=""){
				i++;
				jsonString = jsonString + "isDeal:'" + isDeal + "'";
			}
			if(isOvertime!=null&&isOvertime!=""){
				if(i!=0){
					jsonString = jsonString + ","
				}
				i++;
				jsonString = jsonString + "isOvertime:'" + isOvertime  + "'";
			}
			jsonString = jsonString + "}"
			
			
			
			
			var j = 0;
			acceptMap = "{";
			if(nickname!=null&&nickname!=""){
				i++;
				acceptMap = acceptMap + "nickname:'" + nickname + "'";
			}
			if(realname!=null&&realname!=""){
				if(i!=0){
					acceptMap = acceptMap + ","
				}
				i++;
				acceptMap = acceptMap + "realname:'" + realname  + "'";
			}
			if(bookname!=null&&bookname!=""){
				if(i!=0){
					acceptMap = acceptMap + ","
				}
				i++;
				acceptMap = acceptMap + "bookname:'" + bookname  + "'";
			}
			if(typeid!=null&&typeid!=""){
				if(i!=0){
					acceptMap = acceptMap + ","
				}
				i++;
				acceptMap = acceptMap + "typeid:'" + typeid  + "'";
			}
			acceptMap = acceptMap + "}"
			
			//执行重载
			table.reload('borrowReload', {
				page : {
					curr : 1
				//重新从第 1 页开始
				},
				where : {
						acceptMapJson : acceptMap,
						jsonString : jsonString
						
				}
			});
		},addBorrow: function(){
			var openIndex = layer.open({
		        type: 1,
		        title: '添加借阅记录',
		        area : ['350px' , '390px'], 
		        scrollbar: false,//禁止浏览器滚动
		        closeBtn: 2,
		        content: $("#addBorrow"),
		        btn: ['确认添加', '取消'],
		        yes: function(index,layero){
		        	layero.find('button[lay-filter=subAddBorrow]').click();//触发form提交按钮
		        },
		        btn2: function(){
		          layer.close(openIndex);
		        }
	        });
		    //提交按钮
		    layui.use(['form', 'jquery'], function(){
			  var form = layui.form;
			  $=layui.jquery;
			  form.on('submit(subAddBorrow)', function(data){
				  if(data.field.borrowtime>0&&data.field.amount>0){
					  $.ajax({
					    	url:"/admin/insertBorrow",
					    	data:{realname:data.field.realname,booknumber:data.field.booknumber,amount:data.field.amount,borrowTime:data.field.borrowtime,idCard:data.field.idcard},
					    	type:"POST",
					    	success:function(rdata){
					    		if(rdata.rspCode=="000000"){
					    			$(".layui-laypage-btn").click();
					    			layer.msg('添加借阅记录成功');
						    		layer.close(openIndex);
								    $("#addBorrow :input").val("");
								    form.render();
					    		}else if(rdata.rspCode=="000004"){
					    			layer.msg(rdata.rspMsg+",请填写身份证号后六位");
					    			$("#idcard-div").attr("class", "layui-form-item");
					    		}else if(rdata.rspCode=="000002"){
					    			layer.msg("该图书库存仅剩"+rdata.data+"本");
					    		}else{
					    			layer.msg("该用户未注册或者未实名认证");
					    		}
					    	},
					    	error:function(rdata){
					    		layer.alert('请重试..', {
								      title: '错误提示'
								    });
					    	}
					    });
				  }else{
					  layer.msg("借阅数量或时长有误");
				  }
				  
				    return false;
			  });
			});
		}
	};

	$('.borrowDiv .layui-btn').on('click', function() {
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});
	
	
	//操作绑定
	table.on('tool(tableFilter)', function(obj){ //注：tool是固定的工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		 
		  if(layEvent === 'del'){ //删除
		    layer.confirm('真的删除行么', function(index){
		      //向服务端发送删除指令
		      $.ajax({
	            url: "/admin/deleteBorrow",
	            type: "POST",
	            data:{borrowId:data.borrowId,isDeal:data.isDeal,bookNumber:data.bookNumber,amount:data.amount},
	            success: function (d) {
	              if(d.rspCode="000000"){
	            	  obj.del();
	              }
	              layer.msg(d.rspMsg);
	            },
	            error: function (d) {
	                alert("error:"+d);
	            }
        	  });
		    });
		  } else if(layEvent === 'editDeal'){
			  var stateIndex = layer.msg('修改借阅状态', {
			        time: 20000,
			        closeBtn: 2,
			        btn: ['未取书', '已取书', '已归还'],
				    yes: function(index,layero){
				    	if(data.isDeal=='0'){
				    		layer.msg('状态未改变');
				    		return ;
				    	}
				    	if(data.isDeal=='2'){
				    		layer.msg('归还状态不能改变');
				    		return ;
				    	}
				    	updateDeal('0');
			        },
			        btn2: function(){
			        	if(data.isDeal=='1'){
				    		layer.msg('状态未改变');
				    		return ;
				    	}
			        	if(data.isDeal=='2'){
				    		layer.msg('归还状态不能改变');
				    		return ;
				    	}
			        	updateDeal('1');
			        },
			        btn3: function(){//归还
			        	if(data.isDeal=='2'){
				    		layer.msg('状态未改变');
				    		return ;
				    	}
			        	$("#a-form-realname").val(data.realName);
			        	$("#a-form-bookname").val(data.bookName);
			        	$("#a-form-borrowtime").val(data.borrowTime);
			        	$("#a-form-returntime").val(data.returnTime);
			        	
			        	$("#a-form-actualReturnTime").val(data.actualReturnTime);
			        	if(data.isOvertime!=null){
			        		$("#a-form-isOvertime").find("option[value='"+data.isOvertime+"']").attr("selected", "selected");
			        	}else{
			        		$("#a-form-isOvertime").find("option[value='']").attr("selected", "selected");
			        	}
			        	layui.use('form', function(){
							var form = layui.form;	
							form.render('select'); //刷新select选择框渲染
						});
			        	$("#a-form-bookSituation").val(data.bookSituation);
			        	$("#a-form-result").val(data.result);
			        	var openIndex = layer.open({
					        type: 1,
					        title: '归还图书',
					        area : ['900px' , '670px'], 
					        scrollbar: false,//禁止浏览器滚动
					        closeBtn: 2,
					        content: $("#editBorrowDeal"),
					        btn: ['确认归还', '取消'],
					        yes: function(index,layero){
					        	layero.find('button[lay-filter=subEditBorrowDeal]').click();//触发form提交按钮
					        },
					        btn2: function(){
					          layer.close(openIndex);
					        }
				        });
					    //提交按钮
					    layui.use(['form', 'jquery'], function(){
						  var form = layui.form;
						  $=layui.jquery;
						  form.on('submit(subEditBorrowDeal)', function(fdata){
							  $.ajax({
							    	url:"/admin/updateBorrow",
							    	data:{borrowId:data.borrowId,isDeal:'2',
							    		amount:data.amount,
							    		bookSituation:fdata.field.bookSituation,
							    		result:fdata.field.result,
							    		isOvertime:fdata.field.isOvertime,
							    		actualReturnTime:fdata.field.actualReturnTime,
							    		bookNumber:data.bookNumber},
							    	type:"POST",
							    	success:function(rdata){
							    		//同步更新缓存对应的值
							    		if(rdata.rspCode=="000000"){
							    			$(".layui-laypage-btn").click();
										    layer.msg('归还成功')
								    		layer.close(openIndex);
										    $("#editBorrowDeal :input").val("");
										    form.render('select');
							    		}else{
							    			layer.msg('归还失败');
							    		}
							    		
							    	},
							    	error:function(rdata){
							    		layer.alert('请重试..', {
										      title: '错误提示'
										    });
							    	}
							    });
							    return false;
						  });
						});
			        }
			      });
			  function updateDeal(isDeal){
				  var borrowId = data.borrowId;
				  $.ajax({
	        	        url: "/admin/updateBorrow",
	        	        type: "POST",
	        	        data:{borrowId:borrowId,isDeal:isDeal},
	        	        success: function (d) {
	        	        	if(d.rspCode=="000000"){
	        	        		obj.update({
	        	        			isDeal:isDeal,
								    });
		        			    layer.close(stateIndex);
		        			    layer.msg('操作成功');
	        	        	}else{
		        			    layer.msg('操作失败');
	        	        	}
	        	        },
	        	        error: function (d) {
	        	        	layer.alert('请重试..', {
							      title: '错误提示'
							    });
	        	        }
	        	   });
			  }
		  }
		});
	
	  //监听表格复选框选择
	  table.on('checkbox(tableFilter)', function(obj){
	    console.log(obj)
	  });
	  
	  $('.otherOperation .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
	  });
	
	
});//use end
/*]]>*/
</script>


<div class="form-group" id="addBorrow" hidden="hidden">
<form class="layui-form" action="">
  <br/>
  <div class="layui-form-item">
    <label class="layui-form-label">真实姓名</label>
    <div class="layui-input-inline">
      <input type="text"  id="form-realname" name="realname" placeholder="请输入姓名" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图书编号</label>
    <div class="layui-input-inline">
      <input type="text"  id="form-booknumber" name="booknumber" placeholder="请输入编号" required="required"  lay-verify="required"  autocomplete="off" class="layui-input" />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">借阅数量</label>
    <div class="layui-input-inline">
      <input type="text"  id="form-amount" name="amount" placeholder="请输入借阅数量" required="required"  lay-verify="required|number"  autocomplete="off" class="layui-input" />
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">借阅时长(星期)</label>
    <div class="layui-input-inline">
      <input type="text"  id="form-borrowtime" name="borrowtime" placeholder="请输入时长" required="required"  lay-verify="required|number"  autocomplete="off" class="layui-input" />
    </div>
  </div>
  <div class="layui-form-item layui-hide" id="idcard-div">
    <label class="layui-form-label">身份证号</label>
    <div class="layui-input-inline">
      <input type="text"  id="form-idcard" name="idcard" placeholder="请输入身份证号后六位"  autocomplete="off" class="layui-input" />
    </div>
  </div>
  <button class="layui-btn layui-hide" lay-submit="" lay-filter="subAddBorrow">确认借阅</button>
</form>  
</div>



<div class="form-group" id="editBorrowDeal" hidden="hidden">
<form class="layui-form editDeal" action="">
  <br/>
  <div class="layui-form-item">
    <label class="layui-form-label">真实姓名</label>
    <div class="layui-input-inline">
      <input type="text"  id="a-form-realname" name="realname"  required="required"  lay-verify="required"  autocomplete="off" class="layui-input layui-disabled" disabled="disabled"/>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">图书名称</label>
    <div class="layui-input-inline">
      <input type="text"  id="a-form-bookname" name="bookname"  required="required"  lay-verify="required"  autocomplete="off" class="layui-input layui-disabled" disabled="disabled"/>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">借阅时间</label>
    <div class="layui-input-inline">
      <input type="text"  id="a-form-borrowtime" name="borrowTime"  required="required"  lay-verify="required"  autocomplete="off" class="layui-input layui-disabled" disabled="disabled"/>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">应归还时间</label>
    <div class="layui-input-inline">
      <input type="text"  id="a-form-returntime" name="returnTime"  required="required"  lay-verify="required"  autocomplete="off" class="layui-input layui-disabled" disabled="disabled"/>
    </div>
  </div>
   <div class="layui-form-item">
   	  <div class="layui-inline">
      <label class="layui-form-label">实际归还时间</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="a-form-actualReturnTime" name="actualReturnTime"  required="required"  lay-verify="required" />
      </div>
      </div>
   </div>
  <div class="layui-form-item">
    <label class="layui-form-label">是否超期</label>
    <div class="layui-input-inline">
      <select  id="a-form-isOvertime" name="isOvertime" lay-verify="required">
      	<option value=""></option>
        <option value="0">未超期</option>
        <option value="1">已超期</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">归还图书情况</label>
	    <div class="layui-input-block">
	      <textarea id="a-form-bookSituation" name="bookSituation" placeholder="图书有无损坏、缺页、涂改等" class="layui-textarea"></textarea>
	    </div>
   </div>
  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">归还处理结果描述</label>
	    <div class="layui-input-block">
	      <textarea id="a-form-result" name="result" placeholder="有无处罚..." class="layui-textarea"></textarea>
	    </div>
   </div>
  <button class="layui-btn layui-hide" lay-submit="" lay-filter="subEditBorrowDeal">确认修改</button>
</form>  
</div>






</body>
<script type="text/html" id="checkboxTpl">
  {{#  if(d.isDeal == 0){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs"  lay-event="editDeal">未取书</a>
  {{#  } }}
  {{#  if(d.isDeal == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="editDeal">已取书</a>
  {{#  } }}
  {{#  if(d.isDeal == 2){ }}
    <a class="layui-btn  layui-btn-xs" style="background-color: #A900B7;" lay-event="editDeal">已还书</a>
  {{#  } }}
</script>
<script type="text/html" id="handler">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //日期时间选择器
  laydate.render({
    elem: '#a-form-actualReturnTime'
    ,type: 'datetime'
  });
}); 
</script> 
</html>